flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/skywatched. review movies and tv shows, based on at proto
skywatched.app
2.7 kB
77 lines
1<script lang="ts">
2 import ReviewCard from '$lib/Components/ReviewCard.svelte';
3 import Container from '$lib/Components/Container.svelte';
4 import { page } from '$app/stores';
5
6 let { data } = $props();
7</script>
8
9<svelte:head>
10 <title>{data.record.author.displayName || data.record.author.handle}'s review | skywatched</title>
11
12 <meta
13 name="description"
14 content="{data.record.author.displayName || data.record.author.handle} reviewed {data.record
15 .record.metadata?.title ?? ''} on skywatched"
16 />
17
18 <meta property="og:url" content={$page.url.href} />
19 <meta property="og:type" content="website" />
20 <meta
21 property="og:title"
22 content="{data.record.author.displayName || data.record.author.handle}'s review | skywatched"
23 />
24 <meta
25 property="og:description"
26 content="{data.record.author.displayName || data.record.author.handle} reviewed {data.record
27 .record.metadata?.title ?? ''} on skywatched"
28 />
29 <meta property="og:image" content="{$page.url.href}/og.png" />
30
31 <meta name="twitter:card" content="summary_large_image" />
32 <meta property="twitter:domain" content="skywatched.app" />
33 <meta property="twitter:url" content={$page.url.href} />
34 <meta
35 name="twitter:title"
36 content="{data.record.author.displayName || data.record.author.handle}'s review | skywatched"
37 />
38 <meta
39 name="twitter:description"
40 content="{data.record.author.displayName || data.record.author.handle} reviewed {data.record
41 .record.metadata?.title ?? ''} on skywatched"
42 />
43 <meta name="twitter:image" content="{$page.url.href}/og.png" />
44</svelte:head>
45
46{#if data.record.record.metadata?.backdrop_path}
47 <img
48 src="https://image.tmdb.org/t/p/w780{data.record.record.metadata.backdrop_path}"
49 alt=""
50 class="fixed h-full w-full object-cover object-center opacity-20"
51 />
52{/if}
53
54<div class="fixed inset-0 h-full w-full bg-black/50"></div>
55
56<Container class="z-10 flex h-screen flex-col items-center justify-center">
57 <ReviewCard data={data.record} />
58
59 <div class="flex flex-wrap items-center justify-center gap-4">
60 <div
61 class="z-10 rounded-lg border border-base-700 bg-base-50/5 px-3 py-2 text-xs font-medium text-base-200 transition-all duration-100 hover:bg-base-50/10"
62 >
63 <a
64 href={`/${data.record.record.item.ref === 'tmdb:m' ? 'movie' : 'tv'}/${data.record.record.item.value}`}
65 >
66 see {data.record.record.item.ref === 'tmdb:m' ? 'movie' : 'show'} details
67 </a>
68 </div>
69 <div
70 class="z-10 rounded-lg border border-base-700 bg-base-50/5 px-3 py-2 text-xs font-medium text-base-200 transition-all duration-100 hover:bg-base-50/10"
71 >
72 <a href={`/user/${data.record.author.handle}`}>
73 all reviews by {data.record.author.displayName || data.record.author.handle}
74 </a>
75 </div>
76 </div>
77</Container>